<template>
  <div class="layout-side-nav">
    <el-scrollbar style="height: 100%">
      <el-menu
        class="layout-side-nav-menu"
        :unique-opened="true"
        :collapse="!permissionStore.isExpand"
        @select="handleSelect"
      >
        <side-nav :routers="routers" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

import { usePermissionStore } from '@/store';

import SideNav from './SideNav.vue';

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const permissionStore = usePermissionStore();
const routers = computed(() => permissionStore.routers);
</script>

<style scoped lang="scss">
.layout-side-nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;

  :deep(.el-scrollbar__view) {
    height: 100%;
  }

  :deep(.el-menu-item.is-active) {
    background-color: var(--el-menu-hover-bg-color);
  }

  .layout-side-nav-menu {
    height: 100%;
  }
}
</style>
